<template>
  <div class="home">
    <breadcrumb-view />

    <div class="content">
      <p class="c_table_name">
        <span>字典管理</span>
        <el-button
          icon="el-icon-plus"
          type="primary"
          class="t_l_btn"
          @click="addDict"
          >新增字典表</el-button
        >
      </p>
      <el-divider></el-divider>
      <el-alert type="info" show-icon :closable="false">
        <p slot="title" class="info-t">
          已选中
          <span style="color: #43c9a8">{{ multipleSelection.length }}</span>
          个分类
          <el-button type="text" :disabled="multipleSelection.length<1" class="clear" @click="toggleSelection"
            >清空</el-button
          >
        </p>
      </el-alert>
      <el-table
        :row-style="{ height: '20px' }"
        :cell-style="{ padding: '0px' }"
        style="width: 100%; font-size: 10px"
        :data="tableData"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" :selectable="checkSelectable"/>
        <el-table-column
          prop="tableId"
          label="ID"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="tableName"
          label="字典名称"
          align="center"
        ></el-table-column>
        <el-table-column
            prop="groupName"
            label="分组名称"
            align="center"
        ></el-table-column>
        <el-table-column
          prop="seqNo"
          label="排序"
          align="center"
        ></el-table-column>
        <el-table-column prop="tableId" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              @click="publish(scope.row)"
              type="text"
              class="table-btn"
              :disabled="scope.row.launchStatus == 1"
              >发布</el-button
            >
            <el-button
              @click="edit(scope.row)"
              type="text"
              style="color: rgba(42, 130, 228, 1)"
              class="table-btn"
              >编辑</el-button
            >
            <el-button
              @click="del(scope.row)"
              type="text"
              class="table-btn"
              style="color: rgba(212, 48, 48, 1)"
              :disabled="scope.row.canDelete !== 1"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="dialogDictVisible"
      width="600px"
      :before-close="handleClose"
    >
      <el-form
        ref="dictform"
        :model="dictform"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="字典表名称" prop="tableName">
          <el-input
            v-model="dictform.tableName"
            placeholder="请输入字典表名称"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="分组名称" prop="groupName">
          <el-input
              v-model="dictform.groupName"
              placeholder="请输入分组名称"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="字典排序" prop="seqNo">
          <el-input-number
            v-model="dictform.seqNo"
            :min="1"
            placeholder="请输入表单排序"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="是否可以删除" prop="canDelete">
          <el-radio-group
            v-model="dictform.canDelete"
            :disabled="title==='编辑字典表'"
          >
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogDictVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDict">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { api } from "../server/api";
import breadcrumbView from "../components/breadcrumbView";

export default {
  data() {
    return {
      tableData: [],
      dialogDictVisible: false,
      title:'',
      dictform: {
        tableName: "",
        seqNo: 1,
        groupName:'',
        canDelete: 1,
      },
      rules: {
        moduleName: [
          { required: true, message: "请输入模块名称", trigger: "blur" },
        ],
        tableName: [
          { required: true, message: "请输入字典表名称", trigger: "blur" },
        ],
        canDelete: [],
        seqNo: [],
      },
      multipleSelection: [],
    };
  },
  components: {
    breadcrumbView,
  },
  created() {
    this.getList();
  },
  methods: {
    checkSelectable(row, index) {
      return row.canDelete === 1
    },
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val;
    },
    toggleSelection() {
      this.multipleSelection.forEach(val=>{
        api.stdappTableDel({ tableId: val.tableId }).then((res) => {
          this.getList();
        });
      })
      this.$message.success("删除成功");
    },
    getList() {
      api.stdappTableLst({ moduleId: this.$route.query.id }).then((res) => {
        console.log(res);
        const arr = res.filter((item) => {
          return item.tableType == 1;
        });

        this.tableData = arr;

        // this.alllist = JSON.stringify(res);
      });
    },
    handleClose(done) {
      this.$refs.dictform.resetFields();
      done();
    },
    addDict() {
      this.dictform = {
        tableName: "",
        moduleId: this.$route.query.id,
        seqNo: 1,
        canDelete: 1,
      };
      this.title='新增字典表'
      this.dialogDictVisible = true;
    },
    edit(row) {
      const { tableId } = row;
      api.stdappTableDetail({ tableId }).then((res) => {
        this.dictform = {
          tableName: res.tableName,
          tableId: res.tableId,
          seqNo: res.seqNo,
          groupName:res.groupName,
          canDelete: res.canDelete,
        };
        this.title='编辑字典表'
        this.dialogDictVisible = true;
      });
    },
    publish(row) {
      api.stdappTableLaunch({ tableId: row.tableId }).then((res) => {
        this.$message({
          type: "success",
          message: "发布成功!",
        });
        this.getList();
      });
    },
    del(row) {
      this.$confirm("是否确认删除该字典?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        api.stdappTableDel({ tableId: row.tableId }).then((res) => {
          this.$message.success("删除成功");
          this.getList();
        });
      });
    },
    submitDict() {
      this.$refs["dictform"].validate((valid) => {
        if (valid) {
          if (this.dictform.tableId != undefined) {
            api.stdappTableUpdDict(this.dictform).then((response) => {
              this.$message.success("修改成功");
              this.dialogDictVisible = false;
              this.getList();
            });
          } else {
            api.stdappTableAddDict(this.dictform).then((response) => {
              this.$message.success("新增成功");
              this.dialogDictVisible = false;
              this.getList();
            });
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  box-sizing: border-box;
  padding: 0 20px;

  .content {
    background-color: #ffffff;
    box-sizing: border-box;
    padding: 0 7px;
    .c_table_name {
      color: rgba(0, 0, 0, 0.85);
      font-size: 12px;
      line-height: 24px;
      font-weight: bold;
      height: 45px;
      line-height: 45px;
      padding: 0px;
      margin: 0px;
      padding: 0 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .t_l_btn {
        background-color: rgba(67, 201, 168, 1);
        border-color: rgba(67, 201, 168, 1);
        width: 106px;
        height: 30px;
        padding: 0px;
        font-size: 14px;
      }
    }
    .el-divider {
      margin: 0px;
    }
    .el-alert {
      padding: 0px;
    }
    .info-t {
      height: 20px;
      padding: 0px;
      font-size: 12px;
    }
    .clear {
      height: 20px;
      margin: 0px;
      padding: 0px;
      background-color: rgba(244, 246, 247, 1);
      margin-left: 58px;
    }

    .table-btn {
      font-size: 12px;
    }
  }
}
</style>